<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }

        .w {
            width: 1200px;
            margin: 10px auto;
        }

        .header {
            height: 150px;
            background-color: purple;
        }

        .banner {
            height: 250px;
            background-color: skyblue;
        }

        .main {
            height: 1000px;
            background-color: yellowgreen;
        }

        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goback">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <script>
        //获取元素
        var bar = document.querySelector('.slider-bar')
        var banner = document.querySelector('.banner')
        //  banner.offsetTop就是被卷去头部大的长度也是盒子的长度,一定要写到滚动的外面
        var bannerTop = banner.offsetTop;
        console.log(bannerTop);
        // 当我们侧边栏固定定位之后应该变化数值
        console.log(bar.offsetTop);

        var sliderbarTop = bar.offsetTop - bannerTop;
        console.log(sliderbarTop);

        // 获取main主体元素
        var main = document.querySelector('.main')
        var goback = document.querySelector('.goback')
        var mainTop = main.offsetTop;
        //这是滚动事件
        document.addEventListener('scroll', function () {
            //找到移出去了多少
            //  console.log(window.pageYOffset);
            //如果被卷去的页面大于170就把右边的盒子改为固定定位
            if (window.pageYOffset >= bannerTop) {
                bar.style.position = 'fixed'
                bar.style.top = sliderbarTop + 'px'
            } else {
                bar.style.position = 'absolute'
                bar.style.top = '300px';
            }
            // 当我们滚动到主体部分时，文字就显示
            if (window.pageYOffset >= mainTop) {
                goback.style.display = 'block '
            } else {
                goback.style.display = 'none '
            }
        })
         //   封装动画
         function animate(obj, target, callback) {
            // 为防止多次点击停不下来
            clearInterval(obj.timer)
            obj.timer = setInterval(() => {
                //必须要把这个写到里面
                // 为了防止取不到整数需要做一下处理
                var step = (target - window.pageYOffset) / 10;
                // 用三元表达式处理
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                if (window.pageYOffset == target) {
                    clearInterval(obj.timer)
                    if (callback) {
                        //调用函数
                        callback();
                    }
                } // else {
                //      obj.style.top = window.pageYOffset + step + 'px';
                //  }
                window.scroll(0, window.pageYOffset + step)
            }, 30);
        }
        // 返回顶部模块
        goback.addEventListener('click', function () {
            // alert('1')
            // window.scroll(0,0)
            animate(window, 0)
        })
    </script>

</body>

</html>